<template>
  <el-card :body-style="{ padding: '10px 20px 20px 20px' }" class="task-card">
    <!-- 任务头部 -->
    <div class="task-header">
      <h3>{{ task.taskName }}</h3>
      <div class="task-actions">
        <el-button type="primary" plain @click="$emit('edit', task)">编辑</el-button>
        <el-button type="danger" plain @click="$emit('delete', task)">删除</el-button>
        <!-- <el-button type="success" plain @click="$emit('evaluate', task)">评估</el-button> -->
      </div>
    </div>

    <el-divider style="margin-top: 2px; margin-bottom: 8px;"></el-divider>

    <!-- 任务内容与进度 -->
    <div class="task-body">
      <div class="task-content">
        <p><strong>负责人:</strong> {{ task.assignedName || '未分配' }}</p>

        <p><strong>任务类型:</strong> {{ getTaskType(task.taskType) }}</p>
        <p>
          <strong>任务状态:</strong>
          <el-tag :type="getStatusType(task.taskStatus)">
            {{ getTaskStatus(task.taskStatus) }}
          </el-tag>
        </p>
        <p>
          <strong>优先级:</strong>
          <el-tag :type="getPriorityType(task.priority)">
            {{ getPriorityLabel(task.priority) }}
          </el-tag>
        </p>
        <p><strong>更新时间:</strong> {{ formatDate(task.updateTime) || formatDate(task.createTime) }}</p>
        <p><strong>截止日期:</strong> {{ formatDate(task.dueDate) }}</p>
        <p><strong>项目名称:</strong> {{ task.projectName || '无描述' }}</p>
        <p><strong>所属租户:</strong> {{ task.tenantName || '无描述' }}</p>
      </div>
      <!-- 任务进度环 -->
      <div class="task-progress">
        <el-progress type="circle" :percentage="task.progress ?? 0" :color="getProgressColor(task.progress ?? 0)"
          class="progress-circle">

        </el-progress>
        <div class="progress-buttons">
          <el-button :icon="Minus" @click="decrease"></el-button>
          <el-button :icon="Plus" @click="increase"></el-button>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { ElCard, ElButton, ElDivider, ElTag, ElProgress } from 'element-plus';
import { Minus, Plus } from '@element-plus/icons-vue';
import type { TaskDTO } from '../../type/Task'; // 确保路径正确

const props = defineProps<{
  task: TaskDTO;
}>();

const emit = defineEmits<{
  (e: 'edit', task: TaskDTO): void;
  (e: 'delete', task: TaskDTO): void;
  (e: 'evaluate', task: TaskDTO): void;
  (e: 'update:task', task: TaskDTO): void;
}>();

// 方法定义
const getTaskType = (type?: string) => {
  if (!type) return '未知类型';
  switch (type) {
    case '1':
      return '功能点分析';
    case '2':
      return '造价综合评估';
    default:
      return '未知类型';
  }
};

const getTaskStatus = (status?: string) => {
  if (!status) return '未知状态';
  switch (status) {
    case '0':
      return '未开始';
    case '1':
      return '进行中';
    case '2':
      return '已完成';
    default:
      return '未知状态';
  }
};

const getStatusType = (status?: string) => {
  if (!status) return 'info';
  switch (status) {
    case '0':
      return 'info';
    case '1':
      return 'warning';
    case '2':
      return 'success';
    default:
      return 'info';
  }
};

const getPriorityLabel = (priority?: string) => {
  if (!priority) return '未知';
  switch (priority) {
    case '0':
      return '低';
    case '1':
      return '中';
    case '2':
      return '高';
    default:
      return '未知';
  }
};

const getPriorityType = (priority?: string) => {
  if (!priority) return 'info';
  switch (priority) {
    case '0':
      return 'success';
    case '1':
      return 'warning';
    case '2':
      return 'danger';
    default:
      return 'info';
  }
};

const formatDate = (date?: string | Date) => {
  if (!date) return '未知日期';
  const d = new Date(date);
  if (isNaN(d.getTime())) return '无效日期';
  return d.toLocaleDateString() + ' ' + d.toLocaleTimeString();
};

/* const getProgressStatus = (percentage: number): 'success' | 'exception' | undefined => {
  if (percentage < 30) return 'exception';
  if (percentage < 70) return undefined; // Element Plus 不支持 "active"
  return 'success';
}; */

const getProgressColor = (percentage: number) => {
  if (percentage < 30) return '#f56c6c';
  if (percentage < 70) return '#e6a23c';
  return '#5cb87a';
};

// 进度调整方法
const decrease = () => {
  const currentProgress = props.task.progress ?? 0;
  if (currentProgress > 0) {
    emit('update:task', { ...props.task, progress: currentProgress - 10 });
  }
};

const increase = () => {
  const currentProgress = props.task.progress ?? 0;
  if (currentProgress < 100) {
    emit('update:task', { ...props.task, progress: currentProgress + 10 });
  }
};
</script>

<style lang="scss" scoped>
.task-card {
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  width: 500px;
}

.task-header {
  display: flex;
  justify-content: space-between;
  //align-items: center;
  text-align: left;
}

.task-actions {
  display: flex;
  gap: 8px; // 添加这一行以确保按钮之间有间隔
  align-items: center;
}

.task-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 10px;

  @media (max-width: 500px) {
    flex-direction: column;
    align-items: center;
  }
}

.task-content {
  flex: 1;
  text-align: left; // 添加这一行以确保文字左对齐

  p {
    margin: 5px 0;

    strong {
      margin-right: 5px;
    }
  }
}

.task-progress {
  display: flex;
  flex-direction: column;
  margin-left: 2px;
  margin-right: 30px;
  margin-top: 30px;
  align-items: center;

  .progress-circle {

    margin-bottom: 10px;
  }

  .progress-buttons {
    display: flex;
    gap: 5px;
    margin-top: 5px;
  }

  @media (max-width: 768px) {
    margin-left: 0;
    margin-top: 15px;
  }
}
</style>
